/**
 * 产品管理搜索组件
 * @author: zxy
 * @update: 2017-03-08
 */

import React, {PropTypes} from 'react';
import {Row, Col, Button, Form, Input} from 'antd';
import styles from './ProductManageSearch.less';
const FormItem = Form.Item;

const ProductManageSearch = ({
  handleSubmitOk,
  form: {
    getFieldDecorator,
    getFieldsValue,
    resetFields,
  },
}) => {

  // labelcol wrappercol间距大小
  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

  // 搜索
  function handleSubmit() {
    handleSubmitOk(getFieldsValue());
  }

  // 清除条件
  function handleReset(e) {
    e.preventDefault();
    resetFields();
  };

  return (
    <div className={styles.box}>
      <Form layout='horizontal' className="ant-advanced-search-form">
        <Row >
          <Col span={12}>
            <FormItem
              label="产品名称："
              {...formItemLayout}
            >
              {getFieldDecorator('product_name')(
                <Input placeholder="请输入产品名称或者产品编号" size="default"/>
              )}
            </FormItem>
          </Col>
          <Col span={12}>
            <Button onClick={handleSubmit} type="primary" style={{margin: '2px 16px 0 100px'}}>搜索</Button>
            <Button onClick={handleReset} >清除条件</Button>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

ProductManageSearch.propTypes = {
  handleSubmitOk: PropTypes.func,
  handleReset: PropTypes.func,
};
export default Form.create()(ProductManageSearch);